@charset "utf-8";
@import "common";

.web {
  $border_color: #e2e2e2;
  $font_color: #d5d5d5;
  //轮播图
  .banner {
    width: 100%;
    max-height: 800px;
    overflow: hidden;
    position: relative;
    img {
      width: 100%;
      display: block;
    }
    .bottom_popups {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .6);
      text-align: center;
      font-size: n(27px);
      .popups_div {
        width: 80%;
        color: white;
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .popups_info_center {
          margin: 0 auto;
          width: 20%;
          text-align: center;
          li {
            width: n(10px);
            height: n(10px);
            display: inline-block;
            background-color: #cdbeb2;
            border-radius: 50%;
          }
          .red {
            background-color: $color;
          }
        }
        .popups_info_left {
          display: flex;
          width: 40%;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          li {
            display: inline-block;
            .goods {
              width: n(28px);
              height: n(28px);
              line-height: n(28px);
              overflow: hidden;
              display: inline-block;
              vertical-align: middle;
              img {
                width: 100%;
                display: inline-block;
              }
            }
            span {
              display: inline-block;
              font-size: n(18px);
            }
          }
        }
        .popups_info_right {
          p {
            font-size: n(18px);
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .new_list_all {
    width: 100%;
    background-color: #FFFFFF;
    .new_list {
      width: 90%;
      margin: 0 auto;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      text-align: left;
      padding: n(37px) 0;
      &:not(:last-child) {
        border-bottom: 1px solid $border_color;
      }
      .new_list_left {
        width: 60%;
        .nll_top {
          p {
            font-size: 12.5px;
            /* text-align: justify; */
            /* height: 32px; */
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-break: break-all;
            text-overflow: ellipsis;
          }
        }
        .nll_bottom {
          margin-top: n(28px);
          .goods {
            width: n(28px);
            height: n(28px);
            line-height: n(28px);
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            img {
              width: 100%;
              display: inline-block;
            }
          }
          span {
            display: inline-block;
            font-size: n(18px);
            color: $font_color;
          }
        }
      }
      .new_list_right {
        overflow: hidden;
        width: n(218px);
        height: n(130px);
      }
    }
  }
  .new_card_all {
    width: 100%;
    background-color: #FFFFFF;
    .new_card {
      width: 90%;
      margin: 0 auto;
      p {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: n(35px) 0 n(20px) 0;
      }
      .NC_img_all {
        display: flex;
        justify-content: space-between;
        .NC_img {
          display: inline-block;
          width: n(188px);
          height: n(123px);
          overflow: hidden;
          img {
            width: 100%;
          }
        }
      }
      .NC_bottom {
        .NC_bottom_left {
          .goods {
            width: n(28px);
            height: n(28px);
            line-height: n(28px);
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            img {
              width: 100%;
              display: inline-block;
            }
          }
          span {
            display: inline-block;
            font-size: n(18px);
            color: $font_color;
          }
        }
        .NC_bottom_right {
          span {
            display: inline-block;
            font-size: 9px;
            color: #d5d5d5;
          }
        }
      }
    }
    .new_list {
      width: 90%;
      margin: 0 auto;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      text-align: left;
      padding: n(37px) 0;
      &:not(:last-child) {
        border-bottom: 1px solid $border_color;
      }
      .new_list_left {
        width: 60%;
        .nll_top {
          p {
            font-size: n(25px);
            text-align: justify;
            height: 32px;
            overflow: hidden;
          }
        }
        .nll_bottom {
          margin-top: n(28px);
          .goods {
            width: n(28px);
            height: n(28px);
            line-height: n(28px);
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            img {
              width: 100%;
              display: inline-block;
            }
          }
          span {
            display: inline-block;
            font-size: n(18px);
            color: $font_color;
          }
        }
      }
      .new_list_right {
        overflow: hidden;
        width: n(218px);
        height: n(130px);
      }
    }
  }
  .ma {
    margin-top: n(25px);
  }
  //登陆页面
  input[type="checkbox"] {
    display: none;
  }
  #checkbox_input_login:checked ~ .login_all {
    transform: translateX(100%);
  }
  .popups {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  //登陆
  .login_all {
    $color: #b60005;
    background-color: #222222;
    position: relative;
    left: -100%;
    top: 0;
    transition: transform .7s ease-in-out;
    .login {
      width: 80%;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -50%);
      //关闭
      .close {
        position: absolute;
        right: 0;
        top: 0;
        overflow: hidden;
        i {
          color: $color;
        }
      }
      .login_logo {
        width: n(161px);
        height: n(136px);
        overflow: hidden;
        margin: 0 auto n(45px) auto;
        img {
          width: 100%;
        }
      }
      input {
        border: none;
      }
      input[type="text"], input[type="password"] {
        font-size: n(20px);
        color: #cdcdcd;
        background-color: #3d3d3d;
        width: 91%;
        padding: n(17px) 0 n(17px) 5px;
      }
      i {
        color: white;
        display: inline-block;
        vertical-align: middle;
      }
      .username, .password {
        width: 100%;
        margin: 0 auto;
        text-align: right;
        background-color: #303030;
      }
      .password {
        margin-top: n(15px);
      }
      p {
        text-align: right;
        margin: n(27px) 0 n(60px) 0;
        i {
          display: inline-block;
        }
        span {
          font-size: 10px;
          color: #FFFFFF;
          display: inline-block;
          vertical-align: middle;
        }
      }
      input[type="submit"] {
        width: 100%;
        font-size: n(23px);
        color: #fff;
        padding: n(17px) 0;
        background-color: $color;
      }
      input[type="button"] {
        width: 100%;
        font-size: n(23px);
        padding: n(17px) 0;
        color: #fff;
        margin-top: n(14px);
        border: 1px solid $color;
      }
    }
  }
  //用户资料与用户未登录
  #checkbox_input_nouser:checked ~ .nouser_info_all {
    transform: translateY(100%);
  }
  #checkbox_input_user:checked ~ .user_info_all {
    transform: translateY(100%);
  }
  #checkbox_input_user:checked ~ .nouser_info_all {
    transform: translateY(-100%);
  }
  #checkbox_input_search:checked ~ .search_page {
    transform: translateX(-100%);
  }
  .user_info_all, .nouser_info_all {
    width: 100%;
    height: initial;
    min-height: 100%;
    position: absolute;
    left: 0;
    top: -100%;
    background-color: #222222;
    transition: transform .7s ease-in-out;
    .user_info {
      width: 100%;
      //搜索框
      .user_search {
        width: 96%;
        padding: n(20px) 0;
        margin: 0 auto;
        border-bottom: n(1px) solid #484848;
        text-align: center;
        .close {
          display: inline-block;
          vertical-align: middle;
          i {
            font-size: n(50px);
            color: $color;
          }
        }
        .search_div {
          width: 90%;
          display: inline-block;
          vertical-align: middle;
          border-radius: 50px;
          border: n(4px) solid #dbdbdb;
          padding: 0 n(15px);
          text-align: left;
          i {
            display: inline-block;
            vertical-align: middle;
            color: #fff;
          }
          input {
            border: none;
            padding: n(7.5px) 0;
            background-color: transparent;
            color: #fff;
            display: inline-block;
            vertical-align: middle;
            font-weight: 500;
          }
          input::placeholder {
            color: #fff;
          }
        }
      }
      //用户信息
      .userinfo_div {
        padding: n(35px) 0 n(20px) 0;
        //头像
        .user_buddha {
          width: n(130px);
          height: n(130px);
          text-align: center;
          margin: 0 auto;
          border-radius: 50%;
          position: relative;
          background-color: #e9e9e9;
          img {
            width: 100%;
            display: inline-block;
            border-radius: 50%;
          }
          sub {
            width: n(33px);
            height: n(33px);
            border-radius: 50%;
            background-color: red;
            color: #FFFFFF;
            position: absolute;
            right: 0;
            top: 0;
            line-height: n(33px);
          }
        }
        //信息
        .user_content_all {
          width: 100%;
          .user_content {
            margin: 0 auto;
            text-align: center;
            padding: n(6px) 0;
            b {
              font-size: n(25px);
              color: #FFFFFF;
              font-weight: 500;
            }
            .personal_center {
              border: 1px solid #FFFFFF;
              font-size: n(14px);
              color: #FFFFFF;
              display: inline-block;
              i {
                display: inline-block;
                vertical-align: middle;
              }
            }
            span {
              display: inline-block;
              position: relative;
              padding: 0 n(10px);
              &:not(:first-child):before {
                content: "";
                display: inline-block;
                vertical-align: middle;
                width: 1px;
                height: 70%;
                position: absolute;
                left: -5%;
                top: 50%;
                transform: translateY(-50%);
                background-color: #FFFFFF;
              }
              font-size: n(23px);
              color: #FFFFFF;
            }
            em {
              color: red;
              font-size: n(23px);
              margin-left: n(9px);
            }
            button {
              padding: n(15px) n(60px);
              border-radius: 50px;
              font-size: n(23px);
              color: #FFFFFF;
              background-color: #cdcdcd;
            }
            .button_active {
              background-color: $color;
            }
          }
          .star_all {
            padding: 0;
            margin: 0 auto;
            text-align: center;
            ul {
              li {
                display: inline-block;
                .star {
                  width: n(21px);
                  height: n(21px);
                  img {
                    width: 100%;
                    display: block;
                  }
                }
              }
            }
          }
        }
      }
    }
    //用户列表
    .user_list_all {
      width: 100%;
      border-top: n(25px) solid #303030;
      .user_list {
        width: 90%;
        margin: 0 auto;
        box-sizing: border-box;
        span, i {
          color: #7f7f7f;
          font-size: n(23px);
        }
        i {
          font-size: x-large;
        }
        .ul_once {
          width: 100%;
          border-bottom: n(2px) solid #303030;
          padding: n(22px) 0;
        }
        .ul_second {
          display: none;
          width: 100%;
          transition: height 2s linear;
          li {
            width: 70%;
            border-bottom: n(2px) solid #303030;
            margin: 0 auto;
            text-align: center;
            font-size: n(21px);
            color: #FFFFFF;
            padding: n(32px) 0;
          }
        }
        input[type="checkbox"] {
          display: none;
        }
        #list_checked_one:checked ~ .ul_second {
          display: block;
        }
        #list_checked_two:checked ~ .ul_second {
          display: block;
        }
        #list_checked_three:checked ~ .ul_second {
          display: block;
        }
        #list_checked_four:checked ~ .ul_second {
          display: block;
        }
      }
    }
  }
  .nouser_info_all {
    .user_info {
      width: 100%;
      //用户信息
      .userinfo_div {
        padding: n(70px) 0 n(40px) 0;
        //信息
        .user_content_all {
          width: 100%;
          margin-top: n(15px);
          .login_now {
            width: 100%;
            margin: 0 auto;
            text-align: center;
            font-size: n(25px);
            color: #FFFFFF;
          }
          .pw_forget {
            width: 100%;
            margin: 0 auto;
            text-align: center;
            font-size: n(23px);
            color: #7a7a7a;
          }
          a {
            text-decoration: underline;
            color: #737373;
          }
        }
      }
    }
  }
  //搜索页面
  .search_page {
    $color: #b60005;
    background-color: #f1f1f1;
    position:absolute;
    left:100%;
    top:0;
    transition: transform .7s ease-in-out;
    //搜索框
    .user_search_all {
      width: 100%;
      background-color: #222222;
      .user_search {
        width: 96%;
        padding: n(20px) 0;
        margin: 0 auto;
        border-bottom: n(1px) solid #484848;
        text-align: center;
        .close {
          display: inline-block;
          vertical-align: middle;
          span {
            font-size: n(26px);
            color: #FFFFFF;
          }
        }
        .search_div {
          width: 90%;
          display: inline-block;
          vertical-align: middle;
          border-radius: 50px;
          border: n(4px) solid #dbdbdb;
          padding: 0 n(15px);
          text-align: left;
          i {
            display: inline-block;
            vertical-align: middle;
            color: #fff;
          }
          input {
            border: none;
            padding: n(7.5px) 0;
            background-color: transparent;
            color: #fff;
            display: inline-block;
            vertical-align: middle;
            font-weight: 500;
          }
          input::placeholder {
            color: #fff;
          }
        }
      }
    }
    .search_result {
      width: 90%;
      margin: 0 auto;
      h4 {
        font-size: n(27px);
        margin-top: n(32px);
      }
      span {
        display: inline-block;
        padding: n(12px) n(16px);
        border: n(2px) solid #e1e1e1;
        font-size: n(29px);
        background-color: #FFFFFF;
        color: #8b8b8b;
        margin: n(12px) 0;
      }
    }
  }
}
